<template>
  <!-- BOMM 确认弹窗 -->
  <div class="boom-confirm-box">
    <div class="confirm-badge">
      <div class="confirm-text">
        {{ props.isConfirm ? $t('mall.confirmed') : $t('mall.to_be_confirmed') }}
      </div>
    </div>
    <p class="info-row" v-if="fileInfo?.fileId">
      <span class="label">{{ $t('mall.bom_number') }}:</span>
      <span class="desc">{{ fileInfo?.fileId }}</span>
    </p>
    <p class="info-row" v-if="fileInfo?.name">
      <span class="label">{{ $t('mall.name') }}:</span>
      <span class="desc">{{ fileInfo?.name }}</span>
    </p>
    <p class="info-row" v-if="fileInfo?.totalManufacturerPn">
      <span class="label">{{ $t('mall.all_models') }}:</span>
      <span class="desc">{{ fileInfo?.totalManufacturerPn }}</span>
    </p>
    <p class="info-row" v-if="fileInfo?.totalManufacturerPn">
      <span class="label">{{ $t('mall.process_type') }}:</span>
      <span class="desc">{{ fileInfo?.totalManufacturerPn }}</span>
    </p>
    <el-row style="margin-top: 10px">
      <el-button v-if="props.isConfirm" type="primary" @click="onConfirm">{{
        $t('mall.view')
      }}</el-button>
      <el-button v-else type="primary" @click="onConfirm">{{ $t('mall.confirm') }}</el-button>
      <el-button type="info" @click="onDownload">{{ $t('om.Download') }}</el-button>
      <el-button type="info" @click="onDelete"> {{ $t('smt.Deleting') }}</el-button>
    </el-row>
  </div>
</template>
<script setup>
const props = defineProps({
  isConfirm: {
    // 是否确认
    type: Boolean,
    default: false,
  },
  fileInfo: {
    // 文件信息
    type: Boolean,
    default: () => {},
  },
});
const emits = defineEmits(['onDownload', 'onDelete', 'onConfirm']);

// 下载
const onDownload = () => {
  emits('onDownload', props.fileInfo);
};

// 删除
const onDelete = () => {
  emits('onDelete', props.fileInfo);
};

// 确认
const onConfirm = () => {
  emits('onConfirm', props.fileInfo);
};
</script>
<style scoped lang="scss">
.boom-confirm-box {
  --el-color-info: #8c8b8b !important;
  box-sizing: border-box;
  padding: 26px 18px;
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  position: relative;
  width: 468px;
  height: 180px;
  .confirm-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 126px;
    height: 126px;
    background: url('@/assets/images/pricing/bg_confirm_badge@2x.png') no-repeat;
    background-size: cover;
    .confirm-text {
      position: absolute;
      top: 36px;
      left: 48px;
      color: #ffff;
      transform: rotate(45deg);
      transform-origin: 50% 50%;
      text-align: center;
      font-family: 'SourceHanSansCN';
    }
  }
  .info-row {
    color: #383838;
    font-size: 14px;
    line-height: 2;
    .label {
      display: inline-block;
      padding-right: 10px;
    }
    .desc {
    }
  }
}
</style>
